<template>
  <div class="table-container">
    <a-table
      :loading="load"
      ref="table"
      :columns="columns"
      :data-source="tableData"
      :pagination="pager"
      :scroll="{ y: tableBodyHeight }"
      @change="changePager"
    >
      <span slot="tag" slot-scope="tags">
        <a-tag v-for="tag in tags" :key="tag" color="green">{{ tag }}</a-tag>
      </span>
      <span
        slot="status"
        slot-scope="status"
        :style="{ color: status === 1 ? 'orange' : '#f40' }"
      >
        {{ status === 1 ? "上架" : "下架" }}
      </span>
      <div slot="operation" class="operation" slot-scope="text, record">
        <a-button size="small" @click="$emit('edit', record)">编辑</a-button>
        <a-button size="small" @click="$emit('remove', record)">删除</a-button>
      </div>
    </a-table>
  </div>
</template>
<script>
import delay from '@/utils/delay';

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
    ellipsis: true,
  },
  {
    title: '描述',
    dataIndex: 'desc',
    key: 'desc',
    ellipsis: true,
  },
  {
    title: '类目',
    dataIndex: 'categoryName',
    key: 'category',
    ellipsis: true,
  },
  {
    title: '预售价格',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '折扣价格',
    dataIndex: 'price_off',
    key: 'price_off',
  },
  {
    title: '标签',
    dataIndex: 'tags',
    key: 'tags',
    scopedSlots: { customRender: 'tag' },
    ellipsis: true,
  },
  {
    title: '限制购买数量',
    dataIndex: 'inventory',
    key: 'inventory',
  },
  {
    title: '上架状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' },
    align: 'center',
    width: 140,
  },
];
export default {
  data() {
    return {
      columns,
      pager: {
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        total: 0,
      },
      tableBodyHeight: 0,
    };
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    load: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    tableData() {
      this.updateTableBodyHeight();
      return this.data.map((item) => ({ ...item, key: item.id }));
    },
  },
  mounted() {
    this.ob = new ResizeObserver(() => {
      this.updateTableBodyHeight();
    });
    this.ob.observe(this.$refs.table.$el.parentElement);
  },
  beforeDestroy() {
    this.ob.unobserve(this.$refs.table.$el.parentElement);
  },
  methods: {
    changePager(pager) {
      this.pager = pager;
      this.$emit('changePager');
    },
    async updateTableBodyHeight() {
      await delay(0);
      const table = this.$refs.table.$el;
      const total = table.parentElement.clientHeight;
      const tHeadHeight = table.querySelector('.ant-table-thead').clientHeight;
      const pager = table.querySelector('.ant-table-pagination');
      let footerHeight = 0;
      if (pager) {
        footerHeight = parseFloat(getComputedStyle(pager, null).marginTop)
          + parseFloat(getComputedStyle(pager, null).marginBottom)
          + pager.clientHeight;
      }
      this.tableBodyHeight = total - tHeadHeight - footerHeight;
    },
  },
};
</script>

<style lang="less" scoped>
.table-container {
  padding: 0 30px 15px;
  overflow: hidden;
}
.operation {
  display: flex;
  gap: 5px;
  justify-content: center;
}
</style>
